<template>
  <div
    class="form-container"
  >
    <h1
      class="form-title"
    >
      登 录
    </h1>
    <el-form
      ref="formRef"
      class="form"
      :model="innerModel"
      :rules="rules"
    >
      <div
        v-loading="isLoading"
        class="loadingBox"
      >
        <el-form-item
          prop="code"
          class="form-item"
        >
          <el-input
            v-model="innerModel.code"
            placeholder="请输入工号"
            prefix-icon="el-icon-user"
            clearable
          >
          </el-input>
        </el-form-item>
        <el-form-item
          prop="password"
          class="form-item"
        >
          <el-input
            v-model="innerModel.password"
            placeholder="请输入密码"
            prefix-icon="el-icon-lock"
            show-password
            clearable
          >
          </el-input>
        </el-form-item>
        <el-form-item
          prop="account"
          class="form-item"
        >
          <el-input
            v-model="innerModel.account"
            placeholder="请输入租户ID"
            prefix-icon="el-icon-user"
            clearable
          >
          </el-input>
        </el-form-item>
        <el-form-item
          class="form-item"
        >
          <div
            class="password-options"
          >
            <el-checkbox
              v-model="innerModel.hasRememberedPassword"
              :disabled="true"
              class="checkbox"
            >
              记住密码
            </el-checkbox>
            <el-button
              type="text"
            >
              找回密码
            </el-button>
          </div>
        </el-form-item>
        <el-form-item
          class="form-item"
        >
          <el-button
            type="primary"
            class="login-button"
            :loading="isLoading"
            @click="handleSubmit"
          >
            登 录
          </el-button>
        </el-form-item>
      </div>
    </el-form>
  </div>
</template>

<script>
/**
 * @typedef {{
 *   'account': String,
 *   'code': String,
 *   'password': String,
 * }} FormData
 */
/**
 * # 登录表单
 * 用于接收用户的账号、密码、租户ID并登录
 */
export default {
  'name': 'FormBox',

  'props': {
    /**
     * 设置`登录表单`是否为加载状态，点击`登录`按钮后使用
     */
    'isLoading': {
      'default': false,
      'type': Boolean,
    },
    /**
     * `登录表单`的外部数据，这是父组件传来的数据
     * @type {FormData}
     */
    'model': {
      'default' () {
        return {
          'account': '',
          'code': '',
          'password': '',
        }
      },
      'type': Object,
    },
  },

  'data' () {
    return {
      /**
       * 是否记住密码
       */
      'hasRememberedPassword': false,
      /**
       * `登录表单`的内部数据，这是真正用于展示的数据
       * @type {FormData}
       */
      'innerModel': {
        'account': '',
        'code': '',
        'password': '',
      },
      /**
       * `登录表单`验证规则
       */
      'rules': {
        'account': [
          {
            'message': '请输入租户ID',
            'required': true,
            'trigger': 'blur',
          },
        ],
        'code': [
          {
            'message': '请输入工号',
            'required': true,
            'trigger': 'blur',
          },
        ],
        'password': [
          {
            'message': '请输入密码',
            'required': true,
            'trigger': 'blur',
          },
          {
            'message': '密码至少为6位',
            'min': 6,
            'trigger': 'blur',
          },
        ],
      },
    }
  },

  'created' () {
    this.setInnerModel()
  },

  'methods': {
    /**
     * 处理`登录表单`的`登录`按钮的点击事件
     */
    'handleSubmit' () {
      this.$refs.formRef.validate((isValid) => {
        if (!isValid) {
          return
        }
        this.$emit('submit', this.innerModel)
      })
    },
    /**
     * 将内部的表单数据与父组件传来的数据同步
     */
    'setInnerModel' () {
      this.innerModel = {
        ...this.model,
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.form-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 400px;
  height: 400px;
  padding: 0 32px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

  .form-title {
    font-weight: lighter;
  }

  .form {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;

    .loadingBox {
        width: 100%;

      .form-item {
        width: 100%;

        .password-options {
          display: flex;
          justify-content: space-between;
        }

        .checkbox {
          color: #409eff;

          &:hover {
            color: #66b1ff;
          }
        }

        .login-button {
          width: 100%;
        }
      }

    }

  }
}
</style>
